import { useEffect, useRef, useState } from 'react'
import axios from 'axios'
import A from './A';

type Res = { id: number; name: string }[]
// interface IRes extends Array<{id: number, name: string}>{}

function App() {
  const [name, setName] = useState<string>('zs')
  // const [age, setAge] = useState<number>(28)
  const [list, setList] = useState<Res>([])
  useEffect(() => {
    async function getData() {
      const res = await axios.get('http://geek.itheima.net/v1_0/channels')
      setList(res.data.data.channels)
    }
    getData()
  }, [])

  const inputRef = useRef<HTMLInputElement>(null)
  const aRef = useRef<HTMLAnchorElement>(null)

  const get = () => {
    console.log(inputRef.current?.value)
    console.log(aRef.current?.href)
  }

  return (
    <div className="App">
      <input type="text" ref={inputRef} />
      <a href="https://www.baidu.com" ref={aRef}>
        百度
      </a>
      <button onClick={get}>获取</button>
      <p>{name}</p>
      <button onClick={() => setName('ls')}>按钮</button>
      <ul>
        {list.map(item => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
      <hr />
      <A/>
    </div>
  )
}

export default App
